<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ppctu="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
  <h:head>
    <title>Telecare Alarm Center</title>
    <link href="#{request.contextPath}/resources/img/favicon.ico" rel="shortcut icon" />    
  <h:outputStylesheet name="css/mainstyle.css"/>
  <script src="http://maps.google.com/maps/api/js?sensor=true"
type="text/javascript"></script>
  </h:head>
  <h:body>
      <div id="head">
            <div class="contenedor960">
                <span> Telecare Alarm Center </span>
            </div> <!-- fin contenedor960 -->
        </div> <!-- fin menu -->
        
        
    <div class="contenedor960">
        
        <ppctu:fieldset id="container" legend="Telecare Alarm Center: Administration"> 
        <h:panelGroup id="firstgroup" rendered="#{dockBean.show}" >
            
            <h:form id="form">        
                <ppctu:dataList value="#{dockBean.alerts}" var="alert"  
                    paginator="true" rows="5"  
                    paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink} {RowsPerPageDropdown}"  
                    rowsPerPageTemplate="5,10,15" >  

                    <f:facet name="header">  
                        Active Alerts  
                    </f:facet>  

                    <ppctu:column>
                      <h:panelGrid  columns="2" cellpadding="5">
                             <h:panelGroup id="firstcolumn">
                                <ppctu:commandLink update=":form:alertDetail" oncomplete="alertDialog.show()" title="Select Alert">  
                                    <ppctu:commandButton value=">>"/>    
                                    <f:setPropertyActionListener value="#{alert}" target="#{dockBean.selectedAlert}" />  
                                </ppctu:commandLink>  
                            </h:panelGroup>
                            <h:outputText value="#{alert.type}  #{alert.priority}  #{alert.affected.simpleName}  #{alert.cause}  #{alert.created}" style="margin-left:10px" />  
                      </h:panelGrid>
                    </ppctu:column>  
                </ppctu:dataList>
                <br/>
                <ppctu:commandButton value="Intervention" actionListener="#{dockBean.hide}" update="container"/>
                
                <ppctu:dialog header="Selected Alert" widgetVar="alertDialog" modal="true" showEffect="fade">  
                    <ppctu:outputPanel id="alertDetail" style="text-align:center;" layout="block">  
                        <h:outputText value="WARNING! you have chosen this alert to intervene it" />
                        <br/>
                        <h:panelGrid  columns="2" cellpadding="5"> 
                            
                           <h:outputLabel for="name" value="Name: " />  
                            <h:outputText id="name" value="#{dockBean.selectedAlert.affected.firstName}, #{dockBean.selectedAlert.affected.lastName}" />  

                            <h:outputLabel for="email" value="E-mail: " />  
                            <h:outputText id="email" value="#{dockBean.selectedAlert.affected.email}" />  

                            <h:outputLabel for="number" value="Mobile Number: " />  
                            <h:outputText id="number" value="#{dockBean.selectedAlert.affected.mobileNumber}"/> 
                            
                            <h:outputLabel for="created" value="Created: " />
                            <h:outputText value="#{dockBean.selectedAlert.created}" />
                        </h:panelGrid>  
                    </ppctu:outputPanel>  
                </ppctu:dialog>  

            </h:form>    
        </h:panelGroup> <!-- END OF THE FIRST PANEL GROUP -->
         
        <h:panelGroup id="secondgroup" rendered="#{!dockBean.show}">
            <h:form id="secondform">
            <ppctu:tabView id="tabView">  

                <ppctu:tab id="tab1" title="About">  
                     <h:panelGrid columns="1" cellpadding="10">   
                        <h:outputText value="First Name: #{dockBean.selectedAlert.affected.firstName}" />
                        <h:outputText value="Last Name: #{dockBean.selectedAlert.affected.lastName}" />
                        <h:outputText value="Simple Name: #{dockBean.selectedAlert.affected.simpleName}" />
                        <h:outputText value="Email: #{dockBean.selectedAlert.affected.email}" />
                        <h:outputText value="Id: #{dockBean.selectedAlert.affected.id}" />
                    </h:panelGrid>  
                </ppctu:tab>  

                <ppctu:tab id="tab2" title="Alert">  
                     <h:panelGrid columns="1" cellpadding="10">   
                         <h:outputText value="Cause: #{dockBean.selectedAlert.cause}" />
                         <h:outputText value="Created: #{dockBean.selectedAlert.created}" />
                         <h:outputText value="Priority: #{dockBean.selectedAlert.priority}" />
                         <h:outputText value="Type: #{dockBean.selectedAlert.type}" />
                    </h:panelGrid>  
                </ppctu:tab>  

                <ppctu:tab id="tab3" title="Device">  
                    <h:panelGrid columns="1" cellpadding="10">  
                        <h:outputText value="Number: #{dockBean.selectedAlert.origin.mobileNumber}" />
                        <h:outputText value="Battery: #{dockBean.selectedAlert.origin.batery}" />
                        <h:outputText value="SimCard: #{dockBean.selectedAlert.origin.simCard}" />
                        <h:outputText value="Temperature: #{dockBean.selectedAlert.origin.temperature}" />
                    </h:panelGrid>  
                </ppctu:tab>
                
                <ppctu:tab id="tab4" title="Contacs">  
                   <ppctu:dataList value="#{dockBean.contacsOfSelectedAlert}" var="person" itemType="disc">  
                        #{person.firstName}, #{person.lastName} : #{person.mobileNumber}  
                    </ppctu:dataList>
                </ppctu:tab>  
            </ppctu:tabView>  
            <br/><br/>
                <center>
                    <ppctu:gmap id="gmap" center="#{dockBean.selectedAlert.affected.latitude},#{dockBean.selectedAlert.affected.longitude}" zoom="13" type="HYBRID" model="#{dockBean.advancedModel}" style="width:600px;height:400px" />  
                  <!--      <ppctu:ajax event="overlaySelect" listener="#{mapBean.onMarkerSelect}"/>
                        
                    <ppctu:gmapInfoWindow>  
                        <ppctu:outputPanel style="text-align:center;display:block;margin:auto:">  
                                <ppctu:graphicImage value="./resources/img/dock/#{mapBean.marker.data}" height="150"/>  
                                <br/>  
                                <h:outputText value="#{mapBean.marker.title}" />  
                        </ppctu:outputPanel>  
                    </ppctu:gmapInfoWindow>
                    </ppctu:gmap></center> -->
                <br/><br/>
                <h:outputText value="Intervention: " /> 
                <ppctu:inputTextarea value="#{dockBean.intervention}"  required="true" style="width: 400px"/></center>
            <ppctu:commandButton value="Done" actionListener="#{dockBean.hide}" update="container" style="float:right"/>
            </h:form>
        </h:panelGroup>
        <ppctu:growl id="growl" showDetail="true"/>
        </ppctu:fieldset><!-- END OF THE SECOND PANEL GROUP -->
    </div> <!-- fin contenedor960 -->  
<ppctu:dock >  
    <ppctu:menuitem value="Home" icon="./resources/img/dock/home.png" url="./dock.xhtml"/>  
    <ppctu:menuitem value="Email" icon="./resources/img/dock/email.png" url="#"/>  
    <ppctu:menuitem value="Chat" icon="./resources/img/dock/portfolio.png" url="./chat.xhtml"/>  
    <ppctu:menuitem value="Chart" icon="./resources/img/dock/chart.png" url="./chart.xhtml"/>  
    <ppctu:menuitem value="History" icon="./resources/img/dock/history.png" url="#"/>  
</ppctu:dock> 
</h:body>


</html>

